import React, { Component } from 'react';
// 导入connect方法,将UI型组件转换为容器型组件
import {connect} from 'react-redux'
// 导入actions
import {actions as orderActions, getList} from '../store/order/index'
import {actions as userActions} from '../store/user/index'
// redux中的bindActionCreators方法，作用是导入一个模块中的所有action
import {bindActionCreators} from 'redux'
// 导入子组件
import User from './User'
import Order from './Order'

class Content extends Component {
  render() {
    console.log(1111111, this.props);
    // userActions这个对象是通过bindActionCreators导入的整个user模块的函数的集合
    let {changeAge, changeName} = this.props.userActions
    let {list, delOrder, addOrder} = this.props;
    return (
      <div>
        <p>我是父组件，也是容器型组件，有数据和逻辑，传给子组件</p>
        <hr />
        <Order list={list} delOrder={delOrder} addOrder={addOrder}></Order>
        <User
          info1={this.props.info1}
          age={this.props.age}
          name={this.props.name}
          changeAge={changeAge}
          changeName={changeName}
        ></User>
        <hr />
      </div>
    );
  }
}

// mapStateToProps 作用是从store中获取数据，映射到组件的props中
const mapStateToProps = (state)=>{
  return {
    age: state.user.info.age,
    name: state.user.info.name,
    info1: state.user.info,
    // list: state.order.list
    // 在模块中封装成函数，在组件中调用
    list: getList(state)
  }
}
// mapDispatchToProps 作用是从store中获取修改数据的方式，映射到组件的props中
const mapDispatchToProps = (dispatch)=>{
  // ownProps作为第二个参数，是可选的。内容是当前组件的props
  return {
    delOrder: (index) => dispatch(orderActions.delOrder(index)),
    addOrder: (info) => dispatch(orderActions.addOrder(info)),
    // changeAge: (age) => dispatch(userActions.changeAge(age)),
    // changeName: (name) => dispatch(userActions.changeName(name))
    // 通过bindActionCreators方法，一次性导入所有函数
    userActions: bindActionCreators(userActions, dispatch)
  }
}

// 这里将UI型组件转换为容器型组件
export default connect(mapStateToProps, mapDispatchToProps)(Content);
